<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
    <script src="/js/jquery.1.11.1.min.js"></script>
</head>
<body>
<!-- 头部栏 -->
<div class="order_head">
    <div class="head_background">
        <div class="head_box">
            <a href="/" class="head_left_a"><img src="/img/logo.jpg" alt="" class="head_left_p"></a>
            <h1 class="head_h1">我的购物车</h1>
            <div class="head_right">
                <span class="head_right_in" th:text="${session.currentUser.memberName}"></span>
                <span class="head_right_in">∨ |</span>
                <a href="/order/myOrders" class="head_right_in">我的订单</a>
            </div>
        </div>
    </div>
</div>

<!-- 购物车内商品 -->
<div class="trolley_background">
    <div class="trolley_background_in">
        <div class="tro_tab_h">
            <div class="col tro_tab_check">
                <form>
                    <input name="all" class="checkAll" type="checkbox"
                           style="height: 25px;width: 25px; margin-left: 15px;"/>全选
                </form>
                <!--                <h1 class="tro_tab_check_p">√</h1>-->
                <!--                <span class="tro_tab_check_sp">全选</span>-->
            </div>
            <div class="col tro_tab_img"></div>
            <p class="col tro_tab_name">商品名称</p>
            <div class="col tro_tab_price">单价</div>
            <div class="col tro_tab_num">数量</div>
            <div class="col tro_tab_total">小计</div>
            <div class="col tro_tab_action">操作</div>
        </div>

        <!-- 商品详情模块，遍历集合中的每一个商品-->
        <div class="tro_tab_h1" th:each="p: ${products}">
            <div class="col tro_tab_check">
                <form>
                    <input name="all" th:value="${p.id}" class="chk tro_tab_check_p" type="checkbox"/>
                </form>
            </div>
            <div class="col tro_tab_img">
                <img th:src="${p.imgPath}" src="/img/app_04.jpg" alt="">
            </div>
            <div class="col tro_tab_name">
                <li class="tro_tab_name_li1" th:text="${p.name}">小米电视4A 32英寸 黑色 32英寸</li>
                <li class="tro_tab_name_li2">适配机型:小米电视</li>
            </div>
            <div class="col tro_tab_price">
                <span id="price" th:text="${p.price}">999</span><span>元</span>
            </div>
            <div class="col tro_tab_num">
                <a class="tro_tab_num_p1" id="subtract" href="javascript:;">-</a>
                <input type="text" th:value="${p.amount}" id="num">
                <a class="tro_tab_num_p2" id="plus" href="javascript:;">+</a>
            </div>
            <div class="col tro_tab_total ">
                <span class="tro_tab_total_value" id="prices" th:text="${p.price * p.amount}">999</span>元
            </div>
            <input th:value="${p.id}" type="hidden">
            <div class="col tro_tab_action delete">x</div>
        </div>

        <div class="tro_item">
            <p class="tro_item_box">+</p>
            <p class="tro_item_p">影视会员年卡199元 <span style="color: #ff6700">(省299元)</span></p>
        </div>
        <div class="tro_item">
            <p class="tro_item_box">+</p>
            <p class="tro_item_p">电视安装服务费70元 <span style="color: #ff6700"></span></p>
        </div>
    </div>

    <div class="tro_item_bot">
        <p class="tro_bot_ppp">+</p>
        <p class="tro_item_p ">1000mAh小米移动电源2 74元 <span style="color: #ff6700"></span></p>
    </div>

    <!-- 合计总价 -->
    <div class="tro_close_bot ">
        <!--<p class="tro_bot_ppp">+</p>-->
        <p class="tro_close_p ">继续购物 | 共<span>1</span>件,已选择了<span>1</span>件<span
                style="color: #ff6700"></span></p>
        <form action="/cart/order" method="get">
            <input type="hidden" id="ids" name="ids">
            <button class="tro_close_p_r">去结算</button>
        </form>
        <p class="tro_close_p_c">合计:<span id="close">999</span>元</p>
    </div>
</div>

<!-- 底部菜单模块-->
<th:block th:include="foot"/>

<!-- 引入依赖的js文件 -->
<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script>
    layui.use(["layer", "laytpl", "form", "upload"], function () {
        let layer = layui.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            form = layui.form,
            upload = layui.upload;

        //单选
        $(".chk").on("click", function () {
            console.log("111")
            // con();
            $(".checkAll").prop("checked", $(".chk").length === $(".chk:checked").length);
            // f();
        });

        //全选
        $(".checkAll").on("click", function () {
            console.log("222")
            $(".chk").prop("checked", $(".checkAll").prop("checked"));
            // con();
            // f();
        });

        //算总价


        //遍历拼接ids
        let getCartIds = function () {
            let ids = ""
            $.each($(".chk:checked"), function (index, item) {
                if (ids) {
                    ids += ",";
                }
                ids += $(item).val();
            });
            $("#ids").val(ids);
        };

        //把ids放到input里
        $("input[type=checkbox]").on("click", function () {
            getCartIds();
        });

        //删除商品
        $(".delete").on("click", function () {
            var id = $(this).prev().val();
            console.log(id);
            //弹窗确认框 点击确认执行第二个函数，点击取消执行第三个函数
            layer.confirm("确认删除？", function () {
                //第二个函数 点击确认 Ajax发请求
                $.post("/cart/delete/" + id, function () {
                    layer.closeAll();
                    layer.msg("删除成功");
                    location.reload();
                })
                //第三个函数 点击取消 自动关窗口
            }, function () {
            });
        });

    });

    var price = document.getElementById("price").innerHTML;
    console.log(price);
    var numElement = document.getElementById("num");
    var num = 1;
    numElement.onblur = function () {
        num = numElement.value;
        if (!regxep1.test(num)) {
            num = 1;
            alert("输入的数量只能是数字！")

        } else {
            if (Number(num) < 1) {
                num = 1;
                alert("该商品数量不能小于0")
            } else if (Number(num) > 5) {
                num = 5;
                alert("该商品数量不能大于5")
            }
        }
        document.getElementById("num").value = num

        sums = price * num;
        close.innerHTML = sums
        prices.innerHTML = sums;


    }

    var prices = document.getElementById("prices");
    console.log("prices值:" + prices);
    var plus = document.getElementById("plus");
    var subtract = document.getElementById("subtract");
    var close = document.getElementById("close");
    console.log("close值:" + close);
    var regxep1 = /\d/;
    var sum1 = 0;


    plus.onclick = function () {
        num = Number(num) + 1;
        if (Number(num) >= 1 && Number(num) <= 99) {
            console.log("num:" + num);
            console.log(num);
            sum = price * num;
            document.getElementById("num").value = num;
            prices.innerHTML = sum;
            close.innerHTML = sum;
        } else if (Number(num) >= 99) {
            alert("该商品数量不能大于99")
            num = Number(num) - 1;
        }
//            sum(num);
    }

    subtract.onclick = function () {
        num--;
        if (Number(num) >= 1 && Number(num) <= 99) {
            console.log("num:" + num);
            sum = price * num;
            document.getElementById("num").value = num;
            prices.innerHTML = sum;
            close.innerHTML = sum;
        } else if (Number(num) <= 1) {
            alert("该商品数量不能小于0")
            num = Number(num) + 1;
        }


//            sum(num);
    }

    function sum(num) {
        sum1 = price * num;
        document.getElementById("num").value = num;
        prices.innerHTML = sum1;
        close.innerHTML = sum1;
    }


</script>
</body>
</html>